import React from 'react'
import date from '../../../const/date'
import styles from '../../../css/date.module.css'
import Config from '../../../Config'
const datepicker = date.getMonthData

class DateMonth extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }
  componentWillMount() {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var today_date = today.getDate()
    var Month = {
      year: year,
      month: month,
      name: year + '年' + month + '月',
      list: datepicker(year, month)
    }

    // 今天为选中日
    Month.list.forEach((item, index) => {
      if (today_date === item.showDate) {
        item.selectedClass = active
        this.props.selectDate({ year, ...item })
      }
    })
    this.setState({
      Month: Month,
      year: year,
      month: month,
      today_date: today_date
    })
  }
  // 点击选择日期
  getDate = (o) => {
    var Month = this.state.Month;
    for (var j = 0; j < Month.list.length; j++) {
      Month.list[j].selectedClass = {};
      if (Month.list[j].date === o.date) {
        Month.list[j].selectedClass = active;
      }
    }
    this.props.selectDate(o)
    this.setState({
      Month: Month,
      startDate: o
    })
  }
  componentDidMount() {
    const dateWrapper = this.refs.dateWrapper
    this.setState({
      dateWidth: (dateWrapper.clientWidth - 25) / 7 + 'px'
    })
  }
  render() {
    const { Month, year, month, today_date, dateWidth } = this.state
    return (
      <div className={styles['container']} >
        <div className={styles['thisMonth']} style={{ color: Config.BaseColor }} >{Month.name}</div>

        <div className={styles['month']} ref='dateWrapper'>
          <div className={styles['week']}>
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>日</div>
          </div>
          {
            Month.list.map((item, index) => {
              return <DateItem
                click={this.getDate}
                key={index}
                year={year}
                month={month}
                item={item}
                width={dateWidth}
                todayDate={today_date}
              />
            })
          }
        </div>
      </div>
    )
  }
}

const DateItem = ({ year, month, item, todayDate, click, width }) => {
  const styleDate = item.showDate >= todayDate && item.month === month ? {} : color999
  const selected = item.selectedClass2 ? selected : {}
  return (
    <div className={styles["date"]}
      style={{ ...styleDate, width: width }}
    >
      {
        item.date === item.showDate &&
        <div className={styles['date2']} style={{ ...selected, width: width }}>
          <div className={styles['date_str']}
            style={{
              fontSize: '13px',
            }}
            onClick={() => click({
              year,
              ...item
            })}
            style={item.selectedClass}
          >
            <div >{item.showDate}</div>
          </div>
          <div className={styles['date_disc']}
            style={{ color: color999 }}
          >
          </div>
        </div>
      }
    </div>
  )
}

const color999 = {
  color: '#999'
}

const active = {
  color: '#fff',
  background: Config.BaseColor
}

const selected = {
  color: '#fff',
  background: 'rgba(61,175,188,0.5)'
}
export default DateMonth 